import { memo } from "react";
import { Link } from "react-router-dom";
import { Avatar, Card, Table } from "antd";
import type { ColumnsType } from "antd/es/table";
import { userStore } from "@/stores/user";
import { surveyStore } from "@/stores/survey";
import { getAnswerNum, getAnswerData } from "@/computed/answer";
import type { surveyAnswerType } from "@/types/index";
import { HomeContent } from "./stye";

export default memo(function Home() {
  const answerData = getAnswerData();
  const columns: ColumnsType<surveyAnswerType> = [
    {
      title: "问卷id",
      dataIndex: "surveyId",
      align: "center",
      width: 120
    },
    {
      title: "答案id",
      dataIndex: "answerId",
      align: "center",
      width: 180
    },
    {
      title: "问卷名称",
      dataIndex: "surveyTitle",
      align: "center"
    },
    {
      title: "开始时间",
      dataIndex: "startTime",
      align: "center",
      width: 180
    },
    {
      title: "结束时间",
      dataIndex: "endTime",
      align: "center",
      width: 180
    },
    {
      title: "答题用时",
      dataIndex: "consumTime",
      align: "center",
      width: 180
    },
    {
      title: "操作",
      dataIndex: "action",
      align: "center",
      width: 100,
      render: (_, record) => (
        <Link target="_blank" to={`/question?id=${record.surveyId}&answerId=${record.answerId}`}>
          查看答案
        </Link>
      )
    }
  ];

  return (
    <HomeContent>
      <div className="content-header">
        <span>首页</span>
      </div>
      <div className="user-data flex-between align-items">
        <div className="flex align-items">
          <Avatar src={userStore.userData.avatar} size={64}></Avatar>
          <span className="user-name">{userStore.userData.name}</span>
        </div>
        <div className="stat-list flex">
          <div className="stat-item">
            <p>问卷数{surveyStore.surveyData.length}</p>
          </div>
          <div className="stat-item">
            <p>答题数{getAnswerNum("add")}</p>
          </div>
        </div>
      </div>
      <Card>
        <Table dataSource={answerData} columns={columns} rowKey={record => record.answerId} pagination={answerData.length <= 10 ? false : { position: ["bottomRight"] }}></Table>
      </Card>
    </HomeContent>
  );
});
